<!--商品价格-->
<template>
    <div>
        <!--条件搜索表单-->
        <el-form :inline="true" :model="form" ref="queryRef" class="demo-form-inline">
            <el-form-item label="商品编号" prop="goodsCode">
                <el-input v-model="form.goodsCode" placeholder="请输入商品编号" clearable @input="getGoodsList"></el-input>
            </el-form-item>

            <el-form-item label="商品名称" prop="goodsName">
                <el-input v-model="form.goodsName" placeholder="请输入商品名称" clearable @input="getGoodsList" @keyup.enter.native="getGoodsList"></el-input>
            </el-form-item>

            <el-form-item label="商品种类" prop="goodsType">
                <el-input v-model="form.goodsType" clearable readonly placeholder="请选择商品种类" suffix-icon="el-icon-arrow-down"
                          @click.native="selectGoodsType"></el-input>
            </el-form-item>
            <!--真正的传参 typeId-->
            <el-form-item prop="typeId">

            </el-form-item>

            <el-form-item label="商品状态" prop="status">
                <el-select v-model="form.status" clearable placeholder="请选择商品状态" @change="getGoodsList">
                    <el-option
                            v-for="item in status"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="getGoodsList">查询</el-button>
                <el-button @click="resetForm('queryRef')">重置</el-button>
            </el-form-item>
        </el-form>

        <!--商品列表-->
        <el-table
                :data="goodsList"
                style="width: 100%"
                height="540">
            <el-table-column
                    fixed
                    label=""
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    prop="goodsCode"
                    label="商品编码"
                    width="180" show-overflow-tooltip>
            </el-table-column>
            <el-table-column
                    prop="goodsName"
                    label="商品名称"
                    width="200">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="商品状态"
                    width="120">
            </el-table-column>
            <el-table-column
                    label="操作"
                    width="250">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="primary"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                </template>
            </el-table-column>
        </el-table><!--/ 商品列表-->

        <!--分页-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNum"
                :page-sizes="[5, 10, 50, 100, 200]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
        </el-pagination><!--/ 分页-->

        <!--商品种类弹出框-->
        <SelectGoodsType v-if="goodsTypeFlag" :checked="form.typeId" :goodsTypeList="goodsTypeList" @close="selectGoodsType"></SelectGoodsType>

        <!--编辑价格对话框-->
        <PriceEdit v-if="editFlag" :goods="goods" @close="handleEdit"></PriceEdit>
    </div>
</template>

<script>
    import API from "../../../api/api";
    import SelectGoodsType from "../../../components/goodList/SelectGoodsType";
    import PriceEdit from "../../../components/goodPrice/PriceEdit";

    export default {
        name: "GoodsPrice",
        components: {
          SelectGoodsType, PriceEdit
        },
        data () {
            return {
                // 商品详情对话框标志位
                detailFlag: false,
                // 修改商品标志位
                editFlag: false,
                // 添加商品标志位
                addFlag: false,
                // 商品种类弹出框标志位
                goodsTypeFlag: false,
                // 分页
                pageNum: 1,
                pageSize: 10,
                total: 100,
                // 组件之间传递数据
                goods: {},
                // 条件查询-展示的表单
                form: {
                    goodsCode: '',
                    goodsName: '',
                    // 用于展示
                    goodsType: '',
                    // 真正有效参数(对象)
                    typeId: '',
                    status: '',
                },
                // 商品种类
                goodsTypeList: [
                    // {typeId: '1', typeName: '酒', isDefault: '1'},
                    // {typeId: '2', typeName: '冷饮', isDefault: '1'},
                    // {typeId: '3', typeName: '热饮', isDefault: '1'},
                    // {typeId: '4', typeName: '牛奶', isDefault: '1'},
                ],
                // 商品列表
                goodsList: [
                    // {goodsCode: '0001', goodsName: '橙汁1', status: '1'},
                    // {goodsCode: '0002', goodsName: '橙汁2', status: '1'},
                    // {goodsCode: '0003', goodsName: '橙汁3', status: '1'},
                    // {goodsCode: '0004', goodsName: '橙汁4', status: '1'},
                    // {goodsCode: '0005', goodsName: '橙汁5', status: '1'},
                    // {goodsCode: '0006', goodsName: '橙汁6', status: '1'},
                    // {goodsCode: '0007', goodsName: '橙汁7', status: '1'},
                    // {goodsCode: '0008', goodsName: '橙汁8', status: '1'},
                    // {goodsCode: '0009', goodsName: '橙汁9', status: '1'},
                    // {goodsCode: '0010', goodsName: '橙汁a', status: '1'},
                ],
                // 商品状态
                status: [
                    {value: 1, label: '可用'},
                    {value: 0, label: '不可用'}
                ],
                // 单位
                unit: [

                ],
            }
        },
        mounted() {
            this.getGoodsUnit();
            this.getGoodsTypeList();
            this.getGoodsList();
        },
        methods: {
            // 单位查询
            getGoodsUnit() {
                let url = API.unit.selectUnitList;
                this.$get(url, {}).then(res => {
                    let data = res.data;
                    if (data.success) {
                        this.unit = data.data.list;
                    }
                }).catch( err => {
                    this.$message.error("请求失败!");
                })
            },
            // 商品种类查询
            getGoodsTypeList() {
                let url = API.type.selectTypeList;
                this.$post(url, {}).then(res => {
                    const data = res.data;
                    console.log(data, '商品种类查询-----------');
                    if (data.success) {
                        this.goodsTypeList = data.data.list;
                    }
                }).catch(err => {

                });
            },
            // 商品列表查询
            getGoodsList() {

                // let {goodsType, ...goodsQuery} = Object.assign({}, this.form);
                let {goodsType, ...param} = Object.assign({}, this.form);
                let goodsQuery = { param: param};
                // console.log(".....goodsQuery", goodsQuery);
                if (goodsQuery.param.typeId) {
                    goodsQuery.param.typeId = goodsQuery.typeId.map(t => {return t.typeId}).toString();
                }
                goodsQuery.pageNum = this.pageNum;
                goodsQuery.pageSize = this.pageSize;
                console.log(goodsQuery, '条件查询param');
                let url = API.goods.selectList;
                this.$post(url, goodsQuery).then(res => {
                    let data = res.data;
                    console.log(data.list, '商品列表查询响应----------');

                    if (data.success) {
                        this.goodsList = data.data.list;
                        this.goodsList.map(item => {
                            item.status = item.status === '1'|1? '可用':'不可用';
                        });
                        console.log(this.goodsList, 'goodsList-------------');
                        this.total = data.data.total;
                    }
                })

            },
            // 重置表单
            resetForm(ref) {
                this.$refs[ref].resetFields();
                this.getGoodsList();
            },
            // 打开或关闭商品种类对话框
            selectGoodsType(goodsType) {
                console.log((!this.goodsTypeFlag? '"打开"':'"关闭"')+'选择种类对话框----------');
                console.log(goodsType, "goodsType------------------");
                if (goodsType instanceof Array) {
                    this.form.goodsType = goodsType.map(t => {return t.typeName}).toString();
                    this.form.typeId = goodsType;
                    console.log(this.form.goodsType, 'form.goodsType----------------');
                    console.log(this.form.typeId, 'form.typeId----------------');

                } else if (goodsType instanceof Array && goodsType.length === 0) {
                    this.form.typeId = [];
                    this.form.goodsType = '';
                }

                this.goodsTypeFlag = !this.goodsTypeFlag;
            },
            // 编辑-操作按钮
            handleEdit(index, row) {
                this.editFlag = !this.editFlag;
                if (!this.editFlag) {
                    this.getGoodsList();
                }
                this.goods = row;
                console.log(index, row);
            },
            // 分页
            handleSizeChange(val) {
                this.pageSize = val;
                this.getGoodsList();
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                this.pageNum = val;
                this.getGoodsList();
                console.log(`当前页: ${val}`);
            }
        }
    }
</script>

<style lang="scss" scoped>
    /deep/.el-input__inner{
        height: 35px;
        line-height: 20px;
    }
</style>
